<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        carNo: "",
        typeId: "",
        name: "",
        brand: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "carNo",
          placeholder: "CarNumber",
          width: 220
        },
        {
          type: "select",
          prop: "typeId",
          placeholder: "CarType",
          width: 200,
          options: []
        },
        {
          type: "input",
          prop: "name",
          placeholder: "CarName",
          width: 200
        },
        {
          type: "input",
          prop: "brand",
          placeholder: "BrandName",
          width: 220
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          plain: true,
          icon: "el-icon-search",
          handle: e => {
            this.zeroFn();
            this.init();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              carNo: "",
              typeId: "",
              name: "",
              brand: ""
            };
            this.zeroFn();
            this.init();
          }
        }
      ],

      tableHandles: [
        {
          label: "Add",
          type: "primary",
          plain: true,
          isShow: true,
          handle: e => this.elFormVisible(),
          isShow: row => {
            return sessionStorage.role == "operator" ? true : false;
          }
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "CarName",
          prop: "name"
        },
        {
          label: "QR Code",
          type: "image",
          width: 100,
          prop: "qrCord"
        },
        {
          label: "CarNumber",
          prop: "carNo"
        },
        {
          label: "Brand",
          prop: "brand"
        },
        {
          label: "CarStatus",
          prop: "status",
          formatter: e =>
            e.status == 0 ? "Leave Unused" : e.status == 1 ? "Rent" : "--",
          itemClass: e => (e.status == 1 ? "danger" : "")
        },
        {
          label: "Creation Time",
          prop: "ctime"
        },
        {
          label: "Operations",
          type: "button",
          width: 200,
          btnList: [
            {
              label: "Edit",
              type: "primary",
              size: "mini",
              plain: true,
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "danger",
              size: "mini",
              plain: true,
              handle: row => {
                this.$confirm("Confirm Delete?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.carRemove(row.id);
                    this.$message({
                      type: "success",
                      message: "Delete Success!"
                    });
                    this.init();
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        id: "", //车辆id
        agentId: "", //Agentid
        carNo: "", //车编号
        name: "", //车名
        brand: "", //品牌Name
        typeId: "" //车Typeid
      },
      formCols: [
        { type: "input", label: "CarName", width: 350, prop: "name" },
        { type: "input", label: "CarBrand", width: 350, prop: "brand" },
        {
          type: "select",
          label: "CarType",
          width: 350,
          prop: "typeId",
          options: []
        },
        { type: "input", label: "CarNumber", width: 350, prop: "carNo" },
        {
          type: "select",
          label: "Agent",
          width: 350,
          prop: "agentId",
          options: []
        }
      ],
      formRules: {
        agentId: [
          { required: true, message: "Please Select", trigger: "blur" }
        ],
        carNo: [{ required: true, message: "Please Enter", trigger: "blur" }],
        name: [{ required: true, message: "Please Enter", trigger: "blur" }],
        brand: [{ required: true, message: "Please Enter", trigger: "blur" }],
        typeId: [{ required: true, message: "Please Select", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  async mounted() {
    this.init();
    this.carTypeFn();
    this.agent_list();
  },

  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };

      let res = await this.apis.carList(parm);

      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    },
    // 拿到车辆Typeid
    async carTypeFn() {
      let parm = {
        pageNum: 1,
        pageSize: 100,
        name: ""
      };
      let res = await this.apis.carTypeList(parm);
      if (res.rows.length !== 0) {
        let options = [];
        res.rows.forEach(i => {
          options.push({
            value: i.id,
            label: i.name
          });
        });

        this.formCols[
          this.labIndex2(this.formCols, "typeId")
        ].options = options;
        this.searchForm[
          this.labIndex2(this.searchForm, "typeId")
        ].options = options;
      }
    },
    //Agent列表
    async agent_list() {
      const res = await this.apis.agent_list({
        pageNum: 1,
        pageSize: 100
      });
      var list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          label: res.name,
          value: res.id
        });
      });
      this.formCols[this.labIndex2(this.formCols, "agentId")].options = options;
    },

    // Edit/Add---确定按钮
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          var res;
          if (this.formData.id) {
            //Edit
            res = await this.apis.carEdit(this.formData);
          } else {
            //Add
            res = await this.apis.carSave(this.formData);
          }

          setTimeout(() => {
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.msg
            });
            this.init();
            this.elFormVisible();
          }, 600);
        }
      });
    },
    // Edit按钮
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.elFormVisible();
    }
  }
};
</script>
<style scoped lang="scss"></style>
